<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤状况</title>
</head>
<body>
<style type="text/css">
	.index-body1{
		padding: 20px;
    	background-color: #f3f3f3;
    	padding-bottom: 30px;
	}
	.index-body2{
		width: 100%;
	    height: 100%;
	    background-color: #fff;
	}
	.index-body3{
		min-width: 950px;
	     padding: 20px;
	    position: relative;
	}
	.title-left{
		display: inline-block;
	    float: left;
	    height:50px;
	    line-height:50px;
	    margin-right: 5px;
	    font-size: 12px;
	   	color: gray;
	}
	.title-right{
		float: right;
		width:400px;
		height: 50px;
	}
	.title-right div{
		float: left;
		width:250px;
		margin-right: 20px;
		margin-top: 15px;
	}
	.title-right div input{
		background-color: inherit;
		height: 22px;
	    padding: 0 4px;
	    font-size: 12px;
	    border-radius: 2px;
	    border: 1px solid #eee;
	}
	.title-right i{
		background-color: red;
	    width: 22px;
	    height: 22px;
	    display: table;
	    float: right;
	}
	.datagrid-header-row td{
		background: #6666661a;
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	}
	.datagrid-row td{
		background: #fff;
		font-size: 12px;
	}
	.datagrid-row td:hover{
		background: #f3f3f3;
	}
	
	#table1{
		width: 100%;
	    float: left;
	    overflow-x: auto;
	    margin-top: 5px;
	    border-collapse: collapse;
	    border: 1px solid #e4e7ec;
	    background-color: #fff;
	    
   		color: gray;
   		font-size:12px; 
	}
	#table1 thead{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	} 
	#table1 th{
		background: #6666661a;
	}
	#table1 td{
		border: 1px solid #e4e7ec;
		width: 150px;
		height: 50px;
	}
	.table1-xiang{
		padding: 2px 8px 1px 8px;
    	font-size: 12px;
    	border-radius: 3px;
    	color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7;
	}
	
	ul{
	list-style:none;
	margin: 0px;
	}
	.top-se>li,.date-search{
	float:left;
	padding-right: 5px;
    padding-left: 5px;
	}
	.top-se span{
		font-size: 12px;
		color: gray;
	}
	.textbox{
		height: 25px;
	}
	.datagrid-cell-c5-sortable{
		color:#19AA8D;
	}
	
</style>

<script type="text/javascript">
$(function(){
	//初始化表格
	
	$('#table1').datagrid({
		url:'select_kqattend',
		singleSelect:true,
		columns:[[
   	 		{field:'a_id',hidden:true,align:'center'},
   	 		{field:'sortable',title:'#',width:28,align:'center'},
			{field:'Staff_name',title:'姓名',width:200,align:'center'},
			{field:'depart_name',title:'部门',width:250,align:'center'},
			{field:'a_dao',title:'签到时间',width:200,align:'center'},
			{field:'a_tui',title:'签退时间',width:200,align:'center'},
			{field:'a_date',title:'考勤日期',width:210,align:'center'}
   	 	]],
	    pagination:true,
	    pageNumber:1,
	    pageSize:5,
	    pageList:[5,10,15]
	});
         
	$("#ss-2").click(function(){
		var kai=$("#title-left-input1").datebox('getValue');
		var jie=$("#title-left-input2").datebox('getValue');
		var id=$("#staff_id").val();
			$('#table1').datagrid({
				url:'select_sousuo',
				singleSelect:true,
				columns:[[
		   	 		{field:'a_id',hidden:true,align:'center'},
		   	 		{field:'sortable',title:'#',width:28,align:'center'},
					{field:'Staff_name',title:'姓名',width:200,align:'center'},
					{field:'depart_name',title:'部门',width:250,align:'center'},
					{field:'a_dao',title:'签到时间',width:200,align:'center'},
					{field:'a_tui',title:'签退时间',width:200,align:'center'},
					{field:'a_date',title:'考勤日期',width:210,align:'center'}
		   	 	]],
		   	 	queryParams:{kai:kai,jie:jie,id:id},
			    pagination:true,
			    pageNumber:1,
			    pageSize:5,
			    pageList:[5,10,15]
			});
	});
	$('#title-right-input1').combogrid({
        panelWidth:250,
        url:'select_sousuoKuang',
        singleSelect:true,
        idField:'Staff_name',
        treeField:'Staff_name',
        columns:[[
        	{field:'sortable',title:'#',width:28},
        	{field:'staff_id',hidden:true},
            {field:'Staff_name',title:'姓名',width:60},
            {field:'depart_name',title:'部门',width:60},
            {field:'Staff_phone',title:'联系电话',width:100}
        ]],
        onClickRow:function(rowIndex, rowData){
    		$("#staff_id").val(rowData['staff_id']);
    	}
    });
});

</script>
<div class="index-body1">
	<div class="index-body2">
			<div class="index-body3">
				<div class="title">
					<div class="title-left"> 
						<ul class="top-se">
							<li></li>
							<li><span>开始时间</span></li>
							<li><input id="title-left-input1" type="text" class="easyui-datebox" required="required" style="width:150px" ></li>
							<li><span>至</span></li>
							<li><input id="title-left-input2" type="text" class="easyui-datebox" required="required" style="width:150px" ></li>
						</ul>
					</div>
					<div class="title-right"> 
						<div><input type="hidden" value="0" id="staff_id"><input id="title-right-input1" >
						<a id="ss-2"   class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"></a>
						</div>
				</div>
				<div class="body-table">
					<table id="table1" class="easyui-datagrid" data-options="width:1023,height:300">
					</table>
			
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>